<template>
  <div class="zb-pro-table">
    <div v-show="props.showSearch" class="header">
      <el-form ref="ruleFormRef" :inline="true" class="search-form" :model="formInline">
        <template v-for="(item, index) in formSearchData" :key="index">
          <el-form-item :label="item.label">
            <template v-if="item.valueType === 'input'">
              <el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
            </template>
            <template v-if="item.valueType === 'select'">
              <el-select v-model="formInline[item.name]" style="width: 100%" :placeholder="`请选择${item.label}`">
                <el-option v-for="ite in item.options" :key="ite.value" :label="ite.label" :value="ite.value" />
              </el-select>
            </template>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
          <el-button icon="Refresh" @click="handleReset(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!----------底部---------------------->
    <div class="footer">
      <!-----------工具栏操作工具----------------->
      <div class="operator">
        <slot name="btn" />
      </div>
      <!-- ------------表格--------------->
      <div class="table">
        <el-table v-loading="loading" :data="list" @selection-change="(val) => emit('selection-change', val)">
          <template v-for="item in columns">
            <template v-if="!item.isNotShow">
              <el-table-column v-if="item.type" :type="item.type" :width="item.width" :align="item.align != null ? item.align : 'center'" :fixed="item.fixed" :label="item.label" :min-width="item.minWidth" :show-overflow-tooltip="item.overflow" />
              <el-table-column v-else :prop="item.name" :width="item.width" :align="item.align != null ? item.align : 'center'" :fixed="item.fixed" :label="item.label" :show-overflow-tooltip="item.overflow" :min-width="item.minWidth">
                <template #default="scope">
                  <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
                  <slot v-else :name="item.name" :item="item" :row="scope.row" />
                </template>
              </el-table-column>
            </template>
          </template>
        </el-table>
      </div>
      <!-- ------------分页--------------->
      <div class="pagination">
        <!--自定义分页        -->
        <slot v-if="!isOpenPage" name="pag" />
        <!--通用分页        -->
        <div v-else>
          <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="$emit('getList')" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const ruleFormRef = ref()
const emit = defineEmits(['reset', 'onSubmit', 'selection-change', 'getList'])

let props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  data: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  showSearch: {
    type: Boolean,
    default: true,
  },
  isOpenPage: {
    type: Boolean,
    default: false,
  },
  total: {
    type: Number,
    default: 0,
  },
  queryParams: {
    type: Object,
    default: null,
  },
})

const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {}

const list = computed(() => {
  return props.data
})

const listLoading = ref(false)
const confirmEdit = (row) => {
  row.edit = false
}
const cancelEdit = (row) => {
  row.edit = false
}

import { reactive } from 'vue'

let obj = {}
let search = []
for (let item of props.columns) {
  if (item.inSearch) {
    if (item.defaultKey !== undefined) {
      obj[item.name] = item.defaultKey
    } else {
      obj[item.name] = null
    }
  }
  if (item.inSearch) {
    search.push(item)
  }
}

const formSearchData = ref(search)
const formInline = reactive(obj)

const onSubmit = () => {
  emit('onSubmit', formInline)
}

const handleReset = (formEl) => {
  formSearchData.value.forEach((item) => {
    if (item.defaultKey !== undefined) {
      formInline[item.name] = item.defaultKey
    } else {
      formInline[item.name] = undefined
    }
  })
  emit('reset')
}

const deleteAction = (row) => {
  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  })
    .then(() => {
      list.value = list.value.filter((item) => item.id !== row.id)
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}
</script>
<style scoped lang="scss">
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.zb-pro-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    /*padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;*/

    .search-form {
      flex: 1;

      :deep() {
        .el-input--default {
          width: 200px;
        }
      }
    }

    .search {
      flex-shrink: 0;
      white-space: nowrap;
    }
  }

  .footer {
    flex: 1;
    display: flex;
    /*padding: 16px;*/
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    min-height: 300px;

    .operator {
      margin-bottom: 15px;
    }

    .table {
      position: relative;
      flex: 1;
    }

    .zb-table {
      position: absolute;
      height: 100%;
    }
  }

  :deep() {
    .el-table__header th {
      // font-size: 15px;
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    margin-bottom: 15px;
  }
}
</style>
